import {TargetWeight} from '@/components/input/targetWeight'
import {CnMediumSpan, CnNormalSpan} from '@/components/text'
import antDesignVue from '@/libs/global/antDesignVue'
import {PropType,reactive, toRefs, ref, defineComponent, watch, computed,onMounted} from 'vue'
const {message} = antDesignVue
/**
 * 考评组 添加
 * 基础信息
 * 表格 table
 */
const AddEvaFormTable = defineComponent({
  setup(props, {slots}) {
    return () => <table>{slots.default?.()}</table>
  }
})
/**
 * 考评组 添加
 * 基础信息
 * 表格行 tr
 */
const AddEvaFormTR = defineComponent({
  setup(props, {slots}) {
    return () => <tr class='h-50'>{slots.default?.()}</tr>
  }
})
/**
 * 考评组 添加
 * 基础信息
 * 表格头 thead
 */
const AddEvaFormTHead = defineComponent({
  setup(props, {slots}) {
    return () => <thead>{slots.default?.()}</thead>
  }
})
/**
 * 考评组 添加
 * 基础信息
 * 表格头的单元格 th
 */
const AddEvaFormTh = defineComponent({
  setup(props, {slots}) {
    return () => <th class='text-14'>{slots.default?.()}</th>
  }
})
/**
 * 考评组 添加
 * 基础信息
 * 表格body tbody
 */
const AddEvaFormTBody = defineComponent({
  setup(props, {slots}) {
    return () => <tbody>{slots.default?.()}</tbody>
  }
})
/**
 * 考评组 添加
 * 基础信息
 * 表格body的label单元格 td
 */
const AddEvaFormTdLabel = defineComponent({
  props: {
    colspan: Number
  },
  setup(props, {slots}) {
    return () => (
      <td
        class='w-115 pr-12'
        style={{
          textAlign: 'right'
        }}
        colspan={props.colspan}
      >
        <CnMediumSpan class='text-14 text-2xText'>{slots.default?.()}</CnMediumSpan>
      </td>
    )
  }
})
/**
 * 考评组 添加
 * 基础信息
 * 表格body的value单元格 td
 */
const AddEvaFormTdValue = defineComponent({
  setup(props, {slots}) {
    return () => <td>{slots.default?.()}</td>
  }
})

const pmGroupDimensionTypeRadioList: RadioDataList<PmGroupDimensionTypeCode> = [
  {
    label: '量化指标',
    value: '0020'
  },
  {
    label: '定性指标',
    value: '0021'
  }
]

const isCustomSelfRadioList: RadioDataList<1 | 0> = [
  {
    label: '支持',
    value: 1
  },
  {
    label: '不支持',
    value: 0
  }
]

const isImportRadioList: RadioDataList<1 | 0> = [
  {
    label: '支持',
    value: 1
  },
  {
    label: '不支持',
    value: 0
  }
]
const DimensionModalContent = defineComponent({
  props: {
    title: String,
    visible: Boolean,
    pmGroupDimensionTypeCode: {
      type: String as PropType<PmGroupDimensionTypeCode>,
      default: 'kpi'
    },
    defaultPmGroupDimension: Object as PropType<Evaluation.PmGroupDimension>
  },
  emits: {
    'update:visible': (data: boolean): boolean => true,
    confirm: (data: Evaluation.PmGroupDimension): boolean => true
  },
  setup(props, {emit, slots}) {
    let state = reactive<{
      visible: boolean
      yuangognzhidingxinzengzhibiao: number
      zhibiaokudaoru: number
      pmGroupDimension: Omit<Evaluation.PmGroupDimension, 'pmGroupDimensionWeight'> & {
        pmGroupDimensionWeight: number | undefined
      }
    }>({
      visible: false,
      yuangognzhidingxinzengzhibiao: 1,
      zhibiaokudaoru: 1,
      pmGroupDimension: {
        pmGroupDimensionId: -1,
        pmGroupId: -1,
        pmGroupDimensionName: '',
        pmGroupDimensionTypeCode: '0020',
        pmGroupDimensionWeight: undefined,
        isCustomSelf: 1,
        isImport: 1,
        sort: 0,
        pmGroupDimensionTargetList: []
      }
    })

    watch(
      () => state.visible,
      n => {
        n !== props.visible && emit('update:visible', n)
      }
    )

    watch(
      () => props.visible,
      n => {
        state.visible = n ? true : false
      },
      {immediate: true}
    )

    watch(
      () => props.pmGroupDimensionTypeCode,
      n => {
        state.pmGroupDimension.pmGroupDimensionTypeCode = n
      },
      {immediate: true}
    )

    watch(
      () => props.defaultPmGroupDimension,
      n => {
        if (n) {
          console.log('维度弹窗获得默认数据', n)

          Object.assign(state.pmGroupDimension, n)
        }
      },
      {immediate: true}
    )

    return () => (
      <div class='h-555 relative pb-70 overflow-hidden'>
        <div class='h-full overflow-y-auto p-20'>
          <AddEvaFormTable class='w-full'>
            <AddEvaFormTBody>
              <AddEvaFormTR>
                <AddEvaFormTdLabel>维度名称</AddEvaFormTdLabel>
                <AddEvaFormTdValue>
                  <a-input
                    class='w-4/5 rounded-4'
                    v-model={[state.pmGroupDimension.pmGroupDimensionName, 'value']}
                    placeholder='请输入名称'
                    v-slots={{
                      suffix: () => <span></span>
                    }}
                  ></a-input>
                </AddEvaFormTdValue>
              </AddEvaFormTR>
              <AddEvaFormTR>
                <AddEvaFormTdLabel>维度类型</AddEvaFormTdLabel>
                <AddEvaFormTdValue>
                  <a-radio-group
                    v-model={[state.pmGroupDimension.pmGroupDimensionTypeCode, 'value']}
                    size='small'
                    name='pmGroupDimensionTypeCode'
                  >
                    {pmGroupDimensionTypeRadioList.map((option, i) => (
                      <a-radio value={option.value}>{option.label}</a-radio>
                    ))}
                  </a-radio-group>
                </AddEvaFormTdValue>
              </AddEvaFormTR>
              <AddEvaFormTR>
                <AddEvaFormTdLabel>维度权重</AddEvaFormTdLabel>
                <AddEvaFormTdValue>
                  <TargetWeight
                    class='w-4/5'
                    v-model={[state.pmGroupDimension.pmGroupDimensionWeight, 'value']}
                  ></TargetWeight>
                </AddEvaFormTdValue>
              </AddEvaFormTR>
              <AddEvaFormTR>
                <AddEvaFormTdLabel>员工制定新增指标</AddEvaFormTdLabel>
                <AddEvaFormTdValue>
                  <a-radio-group
                    v-model={[state.pmGroupDimension.isCustomSelf, 'value']}
                    size='small'
                    name='dimType'
                  >
                    {isCustomSelfRadioList.map((option, i) => (
                      <a-radio value={option.value}>{option.label}</a-radio>
                    ))}
                  </a-radio-group>
                </AddEvaFormTdValue>
              </AddEvaFormTR>
            </AddEvaFormTBody>
            <AddEvaFormTBody>
              <AddEvaFormTR>
                <AddEvaFormTdLabel>指标库导入</AddEvaFormTdLabel>
                <AddEvaFormTdValue>
                  <a-radio-group
                    v-model={[state.pmGroupDimension.isImport, 'value']}
                    size='small'
                    name='dimType'
                  >
                    {isImportRadioList.map((option, i) => (
                      <a-radio value={option.value}>{option.label}</a-radio>
                    ))}
                  </a-radio-group>
                </AddEvaFormTdValue>
              </AddEvaFormTR>
            </AddEvaFormTBody>
          </AddEvaFormTable>
        </div>
        <div class='absolute bottom-0 left-0 w-full h-70 border-t border-infoLight flex items-center justify-end gap-x-12 px-24'>
          <a-button
            class='w-60 rounded-full'
            onClick={() => {
              state.visible = false
            }}
          >
            取消
          </a-button>
          <a-button
            class='w-60 rounded-full bg-primary text-white'
            type='primary'
            onClick={() => {
              if (!state.pmGroupDimension.pmGroupDimensionWeight) {
                message.warning('请补充维度的权重')
                return
              }
              emit('confirm', {
                pmGroupDimensionId: state.pmGroupDimension.pmGroupDimensionId,
                pmGroupId: state.pmGroupDimension.pmGroupId,
                pmGroupDimensionName: state.pmGroupDimension.pmGroupDimensionName,
                pmGroupDimensionTypeCode: state.pmGroupDimension.pmGroupDimensionTypeCode,
                pmGroupDimensionWeight: state.pmGroupDimension.pmGroupDimensionWeight,
                isCustomSelf: state.pmGroupDimension.isCustomSelf,
                isImport: state.pmGroupDimension.isImport,
                sort: state.pmGroupDimension.sort,
                pmGroupDimensionTargetList: state.pmGroupDimension.pmGroupDimensionTargetList
              })
              emit('update:visible', false)
            }}
          >
            提交
          </a-button>
        </div>
      </div>
    )
  }
})

export default DimensionModalContent
